.mark {
  float: left;
  display: block;
  width: 16px;
  height: 16px;
  padding: 5px;
  margin-left: 10px;
  text-indent: -999em;
  background-repeat: no-repeat;
}

.toolbar {
  position: absolute;
  height: 16px;
  left: 315px;
//  right: 315px;
  background: @light-blue;
  padding-bottom: @padding-horiz;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: @medium-blue;

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

    li { .mark }
  }

  li:hover { background-color: #eee; }

  #marks {
    float: left;
    padding-right: @padding-horiz;
    cursor: url(../imgs/openhand.cur), default !important;
  }

  .timeline {
    float: left;
    padding-right: @padding-horiz;
    border-right: 1px solid @medium-blue;
    cursor: pointer;
    opacity: 0.8;

    .timeline-disabled {
      opacity: 0.4;
      cursor: no-drop;
    }
  }

  .timeline:last-child { border-right: 0; }
}

#palette {
  .toolbar;
  top: 0;
}

#utils {
  .toolbar;
  bottom: 0;
  border-width: 1px 1px 0 1px;
}

#Rect, .icon-Rect {
  background-image: url(../imgs/rect.png) !important;
  background-position: 50% 50%;
}
#Arc, .icon-Arc {
  background-image: url(../imgs/arc.png) !important;
  background-position: -5px 3px;
}

#Symbol, .icon-Symbol {
  background-image: url(../imgs/symbol.png) !important;
  background-position: 3px 1px;
}

#Area, .icon-Area {
  background-image: url(../imgs/area-2.png) !important;
  background-position: 3px 1px;
}

#Text, .icon-Text {
  background-image: url(../imgs/text.png) !important;
  background-position: 50% 50%;
  margin-left: 5px;
}

#Line, .icon-Line {
  background-image: url(../imgs/line-2.png) !important;
  background-position: 50% 50%;
}

#undo { background: transparent url(../imgs/undo.png) no-repeat 50% 50%; }
#redo { background: transparent url(../imgs/redo.png) no-repeat 50% 50%; }

#new  { background: transparent url(../imgs/new.png) no-repeat 50% 50%; }
#open  { background: transparent url(../imgs/open.png) no-repeat 50% 50%; }
#save  { background: transparent url(../imgs/save.png) no-repeat 50% 50%; }
#finishEditing  { background: transparent url(../imgs/export.png) no-repeat 50% 50%; }
#share { background: transparent url(../imgs/share.png) no-repeat 50% 50%; }

#logo {
  display: block;
  float: left;
  height: 16px;
  background: @medium-blue url(../imgs/logo.png) no-repeat;
  background-size: 22px;
  background-position: 1px 1px;
  padding: 8px 10px 2px 25px;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: @medium-weight;

  sup {
    text-transform: none;
    vertical-align: super;
    font-size: 8px;
    color: #666;
  }
}

#logo:hover { background-color: @dark-blue; }

#canvas {
  position: absolute;
  left: 315px;
  right: 315px;
  top: 40px;
  bottom: 40px;
  overflow: auto;
}

#vis, #ivis {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border: 1px solid #bbb;
}

#ivis {
  background: transparent;
  border: 0;
}

#transform-force-pin {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url(../imgs/pin.png);
  margin-left: 10px;
}

#transform-force-pin.pinned { background: url(../imgs/pin-pushed.png); }

// vg.headless
svg.marks, canvas.vega_hidden { display: none; }